<template>
 <div class="box">
   <div class="header">
      <h4>试题录入</h4>
    </div>
    <div class="body">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
  <el-form-item label="学科" prop="subjectID">
    <el-select v-model="form.subjectID" placeholder="请选择活动区域" @change="getDirectory">
      <el-option v-for="item in subjectList" :key="item.value" :value="item.value" :label="item.label">
      </el-option>
        </el-select>
  </el-form-item>
  <el-form-item label="目录" prop="catalogID">
    <el-select v-model="form.catalogID" placeholder="请选择活动区域">
      <el-option v-for="item in directoryList" :key="item.value" :value="item.value" :label="item.label">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="企业" prop="enterpriseID">
    <el-select v-model="form.enterpriseID" placeholder="请选择活动区域">
      <el-option v-for="item in companyList" :key="item.value" :value="item.value" :label="item.label">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="城市" class="city" prop="city">
    <el-select v-model="form.province" @visible-change="getProvince" @change="getCity">
       <el-option
      v-for="(item,index) in provincesOptions"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select>
    <el-select v-model="form.city" placeholder="请选择活动区域">
       <el-option
      v-for="(item,index) in cityOptions"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="方向" prop="direction">
    <el-select v-model="form.direction" placeholder="请选择活动区域">
             <el-option
      v-for="(item,index) in direction"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="题型" prop="questionType">
    <el-radio-group v-model="form.questionType">
      <el-radio :label="item.value" v-for="item in questionType" :key="item.value">{{item.label}}</el-radio>
    </el-radio-group>
  </el-form-item>
    <el-form-item label="难度" prop="difficulty">
    <el-radio-group v-model="form.difficulty">
      <el-radio :label="item.value" v-for="item in difficulty" :key="item.value">{{item.label}}</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="题干" prop="question">
  <quill-editor v-model="form.question" ></quill-editor>
  </el-form-item>
  <el-form-item label="选项" class="choose">
    <el-radio-group class="el_radioall" v-model="form.options" >
      <el-radio :label="item" v-for="item in form.options" :key="item.code">
        <span>{{item.code}}：</span>
        <el-input  placeholder="请输入" size="medium" v-model="form.options.title" ></el-input>
        <el-upload
     class="avatar-uploader"
     action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    v-model="form.options.img"
    >
     <i slot="default">上传照片</i>
    </el-upload>
      </el-radio>

    </el-radio-group>
    <el-button type="danger" @click="addOptions">+增加选项与答案</el-button>
  </el-form-item>
    <el-form-item label="解析视频">
  <el-input  placeholder="请输入" size="medium" v-model="form.videoURL" ></el-input>
  </el-form-item>
  <el-form-item label="答案解析" prop="answer">
  <quill-editor v-model="form.answer" ></quill-editor>
  </el-form-item>
    <el-form-item label="题目备注" class="subject">
    <el-input type="textarea" v-model="form.remarks"></el-input>
  </el-form-item>
    <el-form-item label="试题标签">
    <el-select v-model="form.tags" placeholder="请选择活动区域">
       <el-option v-for="item in tagsList" :key="item.value" :value="item.label" :label="item.label">
      </el-option>
        </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">确认提交</el-button>
    <el-button @click="$router.push('/questions/list')">取消</el-button>
  </el-form-item>
</el-form>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/companys.js'
import { simpleDirectory } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { simpleTag } from '@/api/hmmm/tags.js'
import { add, detail, update } from '@/api/hmmm/questions.js'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        enterpriseID: '',
        direction: '',
        questionType: '',
        difficulty: '',
        question: '',
        options: [
          { code: 'A', title: '', img: '', isRight: false }, { code: 'B', title: '', img: '', isRight: false }, { code: 'C', title: '', img: '', isRight: false }, { code: 'D', title: '', img: '', isRight: false }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      subjectList: [],
      directoryList: [],
      companyList: [],
      provincesOptions: [],
      cityOptions: [],
      direction: direction,
      questionType: questionType,
      difficulty: difficulty,
      tagsList: [],
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }
    }
  },
  async created () {
    if (this.$route.query.id) {
      const ref = await detail({ id: this.$route.query.id })
      this.form = ref.data
    }
    const { data } = await simple()
    this.subjectList = data
    const res = await list({ pagesize: 10000 })
    res.data.items.forEach(item => {
      if (item.company) {
        this.companyList.push({ label: item.company, value: item.id })
      }
    })
  },
  methods: {
    async getDirectory (e) {
      const { data } = await simpleDirectory({ subjectID: e })
      const res = await simpleTag({ subjectID: e })
      this.tagsList = res.data
      this.directoryList = data
    },
    getProvince (value) {
      if (value) {
        this.provincesOptions = provinces()
      }
    },
    getCity (e) {
      if (e) {
        this.cityOptions = citys(e)
      }
    },
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        if (this.$route.query.id) {
          await update(this.form)
          this.$message.success('修改成功')
        } else {
          await add(this.form)
          this.$message.success('添加成功')
        }

        this.$refs.form.resetFields()
        this.$router.push('/questions/list')
      } catch (error) {
        console.log(error)
      }
    },
    addOptions () {
      this.form.options.push({ code: 'E', title: '', img: '', isRight: false })
    }
  }
}
</script>

<style scoped lang='less'>

.header {
  padding: 10px 20px;
  background-color: #fff;
  border-bottom:1px solid #ccc;
  h4{
   margin:10px 0;
   font-weight: 400;
  }
}
.body{
padding: 20px;
  background-color: #fff;
}
/deep/.el_radioall{
  display: flex;
  flex-direction: column;
  .el-radio__input{
    display: flex;
    align-items: center;
  }
  .el-radio{
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .el-radio__label{
    display: flex;
    align-items: center;
  }
  .avatar-uploader{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 90px;
    height: 55px;
    border: 1px dashed #ccc;
    margin-left: 10px;
  }
}
.choose{
 /deep/.el-input__inner{
   width: 250px;
 }
  /deep/.el-button{
    display: flex;
    align-items: center;
    justify-content: center;
  width: 120px;
  height: 40px;
  font-size: 12px;
  }
}
/deep/.el-input__inner{
  width: 400px;
}
.city{
 /deep/ .el-input__inner{
    width: 197px;
    margin-right: 5px;
  }
}
.subject{
  /deep/.el-textarea__inner{
  width: 400px;
}
}
/deep/.ql-blank{
  height: 176px;
}
</style>
